<template>
  <h-container>
    <div class="alert alert-danger">
      注意：该页面显示<span class="i-info"> 订单 </span>的数据列表，请根据下面的列表尽早进行付款
    </div>

    <div class="alert alert-success">
      <span>付款方式：{{webInfo.payInfo}}，请备注群昵称 + 付款序号。</span>
      <span class="red" style="font-weight: 800">已付总额：￥{{deposit.consume}} ，
      <span> 欠款总额：￥{{deposit.arrearage}}</span>
      </span>
    </div>
    <div class="h-toolbar">
      <div class="inline-item">
        <div class="label inline">
          订单时间:
        </div>
        <h-date-range-picker v-model="search.orderDate"/>
        <el-button type="primary" @click="searchData" style="margin-right: 10px;"><i class="fa fa-search"></i> 查询
        </el-button>
      </div>
      <div class="inline-item">
        <div class="label inline">
          订单类型:
        </div>
        <div class="inline">
          <el-radio-group v-model="orderType" @change="typeChange">
            <el-radio :label="0" title="全部"> 全部</el-radio>
            <el-radio :label="1"> 代购</el-radio>
            <el-radio :label="2"> 自购</el-radio>
            <el-radio :label="3"> 运费</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="inline-item">
        <div class="label inline">
          到货状态:
        </div>
        <div class="inline">
          <el-radio-group v-model="arrival" @change="arrivalChange">
            <el-radio :label="-1" title="全部"> 全部</el-radio>
            <el-radio :label="1"> 在途</el-radio>
            <el-radio :label="2"> 到货</el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>
    <div>
      <el-table
        :data="orders"
        border
        tooltip-effect="dark"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        ref="table"
      >
        <!--
        <el-table-column
          type="selection"
          width="48" align="center" fixed="left">
        </el-table-column>
        -->
        <el-table-column
          label="订单编号" width="120"
        >
          <template slot-scope="scope">{{ scope.row.sn }}</template>
        </el-table-column>
        <el-table-column label="下单时间" width="160" prop="createTime" align="center">
        </el-table-column>
        <el-table-column
          label="商品信息" width="110">
          <template slot-scope="scope">
            <h-good-info-display v-model="scope.row" :displayInfo="false"></h-good-info-display>
          </template>
        </el-table-column>

        <el-table-column label="商品规格" min-width="100">
          <template slot-scope="scope">
            <h-specs-display v-model="scope.row"></h-specs-display>
          </template>
        </el-table-column>

        <el-table-column label="订单信息" min-width="200">
          <template slot-scope="scope">
            <h-order-info-display :createTime="false" v-model="scope.row"></h-order-info-display>
          </template>
        </el-table-column>

        <el-table-column
          label="订单金额"
          min-width="150">
          <template slot-scope="scope">
            <h-order-pay-info-display v-model="scope.row"/>
          </template>
        </el-table-column>

        <el-table-column label="状态" align="center" width="120">
          <template slot-scope="scope">
            <h-order-status-display v-model="scope.row" :arrival="true" :pay="true"></h-order-status-display>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.type==1&&scope.row.pay==1">
              <el-button type="text" @click="renameAction(scope.$index,scope.row)">更名</el-button>
            </div>
            <div v-if="scope.row.type==2&&scope.row.pay!=1">
              <el-button type="text" class="red"
                         @click="doDelete(scope.$index,scope.row)">删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="row">
        <div class="col h-pagination">
          <div v-if="selectOrders.length>0" style="float: left;margin-left: 5px;">
            <el-tooltip placement="top">
              <div slot="content">只有代购订单可以进行批量更名操作</div>
              <el-button type="primary" @click="batchRename"> 批量改名</el-button>
            </el-tooltip>

          </div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="search.pagination.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="search.pagination.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="search.pagination.total" class="float-right">
          </el-pagination>
        </div>
      </div>
    </div>
    <h-rename-dialog v-model="renameOrders" :show.sync="renameDialogShow" @success="renameSuccess"
                     title="订单改名申请"></h-rename-dialog>
  </h-container>
</template>
<script>
  import HContainer from 'src/components/shop/layout/Container'
  import HDateRangePicker from 'src/components/common/HDateRangePicker'
  import FrontService from 'src/service/front'
  import HOrderStatusDisplay from 'src/components/common/display/HOrderStatusDisplay'
  import HGoodInfoDisplay from 'src/components/common/display/HGoodInfoDisplay'
  import HSpecsDisplay from 'src/components/common/display/HSpecsDisplay'
  import HOrderInfoDisplay from 'src/components/common/display/HOrderInfoDisplay'
  import HOrderPayInfoDisplay from 'src/components/common/display/HOrderPayInfoDisplay'
  import HRenameDialog from 'src/components/shop/common/HRenameDialog'
  import HSpecChoose from '../../common/choose/HSpecChoose'
  import TableMix from 'src/components/table-mix'
  import {mapState} from 'vuex'

  export default {
    name: 'Order',
    components: {
      HSpecChoose,
      HContainer,
      HDateRangePicker,
      HOrderStatusDisplay,
      HGoodInfoDisplay,
      HSpecsDisplay,
      HOrderPayInfoDisplay,
      HOrderInfoDisplay,
      HRenameDialog
    },
    mixins: [TableMix],
    data() {
      return {
        search: {
          orderType: null,
          orderDate: [],
          todo: 1,
          rename: 0,
          arrival: null,
          pagination: {
            total: 0,
            page: 1,
            limit: 10
          },
          status: 1,
          orderBy: 'pay,sn'
        },
        deposit: {},
        orderType: 0,
        arrival: -1,
        loading: false,
        orders: [],
        selectOrders: [],
        renameOrders: [],
        renameDialogShow: false
      }
    },
    computed: {
      ...mapState(['webInfo'])
    },
    methods: {
      typeChange: function (v) {
        if (v == 0) {
          this.search.orderType = null
        } else {
          this.search.orderType = v
        }
        this.search.pagination.page = 1
        this.getDatas()
      },
      arrivalChange: function (v) {
        if (v == -1) {
          this.search.arrival = null
        } else {
          this.search.arrival = v
        }
        this.search.pagination.page = 1
        this.getDatas()
      },
      handleSelectionChange: function (v) {
        this.selectOrders = v
      },
      handleSizeChange: function (size) {
        this.search.pagination.size = size
        this.getDatas()
      },
      renameAction: function (index, data) {
        this.renameOrders = [data]
        this.renameDialogShow = true
      },
      doDelete: function (index, data) {
        const me = this
        me.$confirm('亲,此操作将把该商品从你的购物列表中删除,是否继续?', '提示', {
          confirmButtonText: '确定不买了',
          cancelButtonText: '还是再想想吧',
          type: 'info'
        }).then(() => {
          FrontService.deleteOrder(data.id).then(ds => {
            if (ds != null) {
              const d = ds.datas[0]
              if (d != null) {
                me.$message.success('删除订单[' + d.sn + ']成功!')
                me.getDeposit()
                me.getDatas()
              } else {
                me.$message.error('删除订单[' + data.sn + ']失败!')
              }
            }
          })
        }).catch(() => {
        })
      },
      renameSuccess: function (datas) {
        this.renameDialogShow = false
        this.getDatas()
      },
      batchRename: function () {
        if (this.selectOrders.length == 0) {
          this.$message.info('请勾选需要更名的订单。')
        } else {
          const proxy = this.selectOrders.filter(d => {
            if (d.type != 1) {
              return true
            }
            return false
          })
          if (proxy.length > 0) {
            this.$message.error('只有代购订单可以进行批量更名操作。')
          } else {
            this.renameOrders = this.selectOrders
            this.renameDialogShow = true
          }
        }
      },
      handleCurrentChange: function (page) {
        this.search.pagination.page = page
        this.getDatas()
      },
      getDatas: function () {
        this.getDeposit()
        const me = this
        me.loading = true
        FrontService.orderSearch(this.search).then(d => {
          if (d != null) {
            me.orders = d.datas
            me.search.pagination = d.pagination
          }
          me.loading = false
        })
      },
      getDeposit: function () {
        const me = this
        FrontService.userDeposit().then(d => {
          if (d != null) {
            me.deposit = d.datas[0]
          }
        })
      },
      searchData: function () {
        this.search.pagination.page = 1
        this.getDatas()
      }
    },
    mounted: function () {
      this.getDatas()
      //this.initTalbeHeight(400)
    }
  }
</script>
